* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-rows: 20% 66% 14%;
    background: #f2f2f2;
}

main {
    display: grid;
    grid-template-columns: 18% 64% 18%;
    grid-template-areas: "tools main pda";
    /* The tool and pda widgets rely on grid-template-areas to name 'tools' and 'pda', do not modify them. */

    & .news-space{
        grid-area: main;
        width: 98%;
        justify-self: center;
        display: grid;
        grid-template-rows: 60px auto;
        background: white;
        border-radius: 10px;
        overflow: hidden;

        & .ns-header{
            display: grid;
            grid-template-rows: 30px 30px;
            color: white;
            background: #00008b;

            & h2{
                height: 100%;
                width: 100%;
                display: grid;
                place-items: center;
                background: linear-gradient(#95afd0, #4f79b0, #2f496a);
            }

            & .ns-sub-header{
                display: grid;
                grid-template-columns: 1fr 1fr;
                align-items: center;
                margin: 0 10px;
            }
            & p:first-child{ & a{ color: blue; text-decoration: none; } }
            & p:last-child{ justify-self: end; }
        }
    }
}